<template>
  <div class="size-color-style">
    <div class="head-size-color" v-if="mode == 'draw'">
      <span class="panelTitle">画笔</span>
      <span class="clearBtn" @click.stop="clearCanvas" @touchstart.prevent.stop="clearCanvas">清空笔记</span>
      <img class="closeBtn" @click="close" @touchstart.prevent="close" :src="closeImg" alt="" />
    </div>
    <div class="container">
      <!-- 颜色 -->
      <div class="colorBox">
        <div
          v-for="(item, index) in colorData"
          :key="item"
          :class="['color', `color${index}`, `${item === color && 'check-color'}`]"
          @click="colorChange(item)"
          @touchstart.prevent="colorChange(item)"
        >
          <div :style="`background: ${item}`"></div>
        </div>
      </div>

      <!-- 粗细 -->
      <div class="sizeBox">
        <lineColorVue :color="color" :size="size" @ok="sizeChange" />
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, watch } from 'vue';
import useStore from '../store';
import { storeToRefs } from 'pinia';
import { cloneDeep } from 'lodash';
import { colorData } from '../utils/sizeColor';
import check from '../assets/teaching/check.svg';
import closeImg from '../assets/close.png';
import lineColorVue from './line-color.vue';

const store = useStore();

const { config } = storeToRefs(store.config);

const props = defineProps({
  type: String,
  clear: {
    type: Boolean,
    default: false,
  },
  mode: {
    // draw 正常模式，shape 绘图模式，取消阴影和头部
    type: String,
    default: 'draw',
  },
});

const size = ref();
const color = ref();

watch(
  () => config,
  (newConfig) => {
    const clone = cloneDeep(newConfig.value);
    if (clone.size) size.value = clone.size;
    if (clone.color) color.value = clone.color;
  },
  { deep: true, immediate: true },
);

const emit = defineEmits(['setcolor', 'setsize', 'close', 'clearCanvas']);

// 隐藏画板
const close = () => {
  emit('close');
};

// 清空画布
const clearCanvas = () => {
  emit('clearCanvas');
};

const sizeChange = (s) => {
  if (s === size.value) return;
  size.value = s;
  emit('setsize', s);
};
const colorChange = (c) => {
  if (c === color.value) return;
  color.value = c;
  emit('setcolor', c);
};
</script>

<style scoped lang="scss">
.size-color-style {
  width: 100%;
  max-height: 200px;
  border-radius: 8px;
  box-sizing: border-box;
  background: rgba(241, 241, 241, 0.89) !important;
  backdrop-filter: blur(20px);

  .head-size-color {
    display: flex;
    align-items: center;
    padding: 16px;

    .panelTitle {
      width: 40px;
      height: 28px;
      font-family: PingFangSC, PingFang SC;
      font-weight: 500;
      font-size: 20px;
      color: #281506;
    }

    .clearBtn {
      width: 88px;
      height: 32px;
      // background: #ffffff;
      border-radius: 36px;
      display: block;
      border: 1px solid #ff581b;
      font-family: PingFangSC, PingFang SC;
      font-weight: 500;
      font-size: 14px;
      color: #ff581b;
      line-height: 20px;
      margin-left: auto;
      display: flex;
      align-items: center;
      justify-content: center;
      margin-right: 16px;
    }

    .closeBtn {
      width: 32px;
      height: 32px;
    }
  }

  .container {
    display: flex;
    padding: 0 16px;
  }

  .colorBox {
    flex: 1;
    display: flex;
    flex-wrap: wrap;

    .color {
      margin: 0 20px 20px 0;
      border-radius: 50%;
      cursor: pointer;
      position: relative;

      &.color0 {
      }

      &.color1 {
      }

      &.color2 {
      }

      &.color3 {
      }

      &.color4 {
      }

      &.color5 {
      }

      &.color6 {
      }

      &.color7 {
        border: 0.065em solid rgba(212, 212, 212, 1);
      }

      div {
        width: 40px;
        height: 40px;
        border-radius: 50%;
      }
    }

    .check-color {
      border: 2px solid #000000 !important;
      padding: 2px;
      box-sizing: border-box;
      width: 40px;
      height: 40px;

      div {
        width: 32px;
        height: 32px;
        border-radius: 50%;
      }
    }
  }

  .sizeBox {
    flex: 1;
    display: flex;
    flex-direction: column;
  }
}
</style>
